import React from 'react';
import ImageLazy from '../commons/ImageLazy';
import NavLink from '../commons/NavLink';
import {order_detail,jsApiCall,pay_set} from '../../actions';
import {BindMixin} from '../../actions/ActionTypes';

import { connect } from 'react-redux';
import {hashHistory } from 'react-router'

const wxa = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../static/img/wx.png');


let mydefault = React.createClass({
  mixins:[BindMixin],
  componentDidMount:function(){
    const {dispatch} = this.props;
    dispatch(order_detail({union_sn:this.props.unionSN}))
    pay_set();

    this.no_login(!this.props.user_logined)
  },
  submit:function(){
    let _this = this,
        thisItem = this.props.orderDetail || [];
        thisItem = thisItem.filter(function(item,index){
          return (item.unionSN == _this.props.unionSN)
        });
        let thisItem_c = thisItem[0];
        console.log(thisItem_c);
        if(thisItem_c.orderState != 1){
          alert('该订单状态已改变 请勿重复提交')
        }else{
          jsApiCall(thisItem_c,_this.props.user);
        }

  },
  render:function(){
    let total_price = 0,
        _this = this,
        order_detail = this.props.orderDetail;
        // console.log(_this.props.unionSN)
    order_detail.forEach(function(item,index){
      // console.log(item.unionSN)
      if(item.unionSN == _this.props.unionSN){
        total_price += item.itemPrice
      }
    })
    return(
      <div className="pay">
        <h4>选择付款方式</h4>
        <div className="item_wrapper border_t1">
          <div className="item border_b1 active" data-state="true">
            <span><ImageLazy src={wxa} style={{height:".67rem"}} />微信支付</span>
            <span><em></em></span>
          </div>
        </div>

        <div className="fix_total border_t1 box">
          <div className="top">
            <span><var></var>合计：¥ {total_price}</span>
          </div>
          <a href="javascript:void(0)" onClick={this.submit}>确认支付</a>
          {/* <NavLink to="/user/payStatus" href="javascript:void(0)">确认支付</NavLink> */}
        </div>

      </div>
    )
  }
})

let mapStateToProps = (state,own)=>{
  var userId = state.user.userId,
      user = state.user,
      orderDetail = state.user.order_detail || [];
      // servDet_arr = state.user.mall_them_hos_servItem_det.itemList || [];
      console.log(user)
  return{
    unionSN:own.params.id,
    userId,
    orderDetail:orderDetail,
    user,
    user_logined:state.user.user_logined
  }
}

export default connect(mapStateToProps)(mydefault)
